﻿@inject System.Security.Claims.IClaimPrincipalManager claimManager

@{
  ViewBag.Title = "Employees";
}

<div id="toolbar">
  @if (claimManager.User.HasClaim("Department", "HR"))
  {
    <button id="btnAdd" title="Add item" class="btn btn-default" type="button"><i class="glyphicon glyphicon-plus"></i>&nbsp;Add</button>
  }
</div>

<div class="container-fluid">
  <table id="table"
         data-url="/Employee/Load"
         data-query-params="getColumnNames"
         data-unique-id="Id"
         data-sort-name="LastName"
         data-sort-order="asc"
         data-crudname="LastName"
         data-pagination="true"
         data-classes="table table-condensed table-hover table-striped"
         data-toggle="table"
         data-cache="false"
         data-side-pagination="server"
         data-show-refresh="true"
         data-show-toggle="false"
         data-show-columns="false"
         data-search="true"
         data-toolbar="#toolbar"
         data-page-size="15"
         data-page-list="[10,15,50,100]">
    <thead>
      <tr>
        <th data-field="" data-formatter="editFormatter" data-visible="true" data-halign="center" data-align="center">Edit</th>
        <th data-field="FirstName" data-sortable="true" data-halign="center" data-align="center">First name</th>
        <th data-field="LastName" data-sortable="true" data-halign="center" data-align="center">Last name</th>
        <th data-field="Gender" data-sortable="true">Gender</th>
        <th data-field="Email" data-sortable="true">Email</th>

        
        @if (claimManager.User.HasClaim("Department", "HR"))
        {
          // Salary only visible to HR department
          <th data-field="Salary" data-sortable="true" data-halign="right" data-align="right">Salary</th>
        }

        @if (await claimManager.HasPolicy("HR-Manager Only"))
        {
          // Delete button only available for HR managers
          <th data-field="" data-formatter="delFormatter" data-visible="true" data-halign="center" data-align="center">Delete</th>
        }
      </tr>
    </thead>
  </table>
</div>

@section scripts {
  @await Html.PartialAsync("bootstraptable")

  <script type="text/javascript">

    $(document).ready(function () {
      var $table = $('#table');

      $('#btnAdd').click(function () {
        editDialog($table);
      });

      // register loaded rows to row-click event
      $table.on('click-row.bs.table', function ($element, row, $tr) {
        highLightRow($tr);
      });

      // hook events to loaded rows
      $table.on('load-success.bs.table', function (data) {
        $(this).off("click", "#btnEditRow").on("click", "#btnEditRow", function (event) {
          editDialog($table, getId(this));
        });

        $(this).off("click", "#btnRemoveRow").on("click", "#btnRemoveRow", function (event) {
          event.stopPropagation();
          deleteItem($table, getId(this));
        });
      });
    });
  </script>
}
